var postUrl = "/pk/pk?";
var dataUrl = "/pk/data?";
var curOffset = -2;
var preloadCount = 4;

function log(str){
	if(typeof console != 'undefined'){
		console.log.apply(console, arguments);
	} else {
		alert(str);
	}
}

function addDyncClass(){
	//鼠标hover的样式
	$('[hover-class]').live('mouseenter', function(){
		$(this).addClass($(this).attr('hover-class'));
	}).live('mouseleave', function(){
		$(this).removeClass($(this).attr('hover-class'));
	});

	//点击样式,比如三态按钮
	$('[click-class]').live('mousedown', function(){
		$(this).addClass($(this).attr('click-class'));
	}).live('mouseup', function(){
		$(this).removeClass($(this).attr('click-class'));
	}).live('mouseleave', function(){
		$(this).removeClass($(this).attr('click-class'));
	});
}

function preload(loadNum){
	loadNum = loadNum || preloadCount; //默认提前加载4张
	var cache = preload._cache = preload._cache || {};

	for(var i=0; i<loadNum; ++i){
		var idx = curOffset + 2 + i;
		if(idx < itemJson.length){
			var o = itemJson[idx];
			if(! cache[o.id]){
				var img = new Image();
				img.src = o.pic_show_url;
				cache[o.id] = img;
				log('preload:'+ o.id + " url:" +o.pic_show_url);	
			}
		}
	}
}

function setPlayersByOffset(offset, noEffect, noGenIdx){
	var p1 = itemJson[offset];
	var p2 = itemJson[offset + 1];
	var colorIndex = (parseInt(offset/2) % 10) +1;
	$('[role="pk-img-wrap"]').each(function(idx, el){
		el.className = el.className.replace(/bgc\d/ig, '') + ' bgc' + colorIndex; 
	});
	//removeClass(/bgc\d/).addClass('bgc' + colorIndex);
	if(! noGenIdx){	
		var idx_tpl = '<div class="side-grid bgc%colorIndex%" onclick="setPlayersByOffset(%offset%,0,1)"></div>';
		$('#pk_index').append(
			idx_tpl.replace(/%colorIndex%/g, colorIndex).replace(/%offset%/g, offset)
		);
	}
	setPlayers(p1, p2, noEffect);
}

function setPlayers(p1, p2, noEffect){
	function setP1(){
		$('#pk1').attr('src', p1.pic_show_url).attr('data-pk',p1.id);
	}
	function setP2(){
		$('#pk2').attr('src', p2.pic_show_url).attr('data-pk',p2.id);
	}
	if(noEffect){
		setP1(); 
		setP2();
	} else {
		$('#pk1').fadeOut(setP1).fadeIn();
		$('#pk2').fadeOut(setP2).fadeIn();
	}
}

function startPk(noEffect){
	$('#pk_main').show();
	curOffset += 2;
	if(curOffset > itemJson.length - preloadCount){
		$.getJSON(dataUrl, function(data){
			itemJson= itemJson.concat(data);
			preload();
			log("loaded..");
		});
		//alert('这一组pk结束.');
		//TODO 加载新的一组数据用于pk.
	}

	setPlayersByOffset(curOffset);
	
	preload(); //预加载
}

function initDataPk(){
	$('[data-pk]').click(function(){
		var winner = $(this).attr('data-pk');
		var loser = (winner == itemJson[curOffset].id) ? itemJson[curOffset + 1].id : itemJson[curOffset].id;

		$.post(postUrl,{
			w: winner,
			l: loser,
			token: token
		}, function(data){
			log(data);
			try{
				data = eval('(' + data + ')');
			} catch(err){
				data = {rate:50};
			}
			$('#pk_result').html(data.rate);
			//$('#pk_main').hide();
			$('#pk_msg').fadeOut().fadeIn('slow');
			startPk();
		});
	});
}
/* 初始化所有元素的大小,根据屏幕尺寸*/
function initSize(){

}

$(function(){
	initSize();
	addDyncClass();
	startPk();
	initDataPk();
});